<template>
  <div class="hold-transition">
    <div class="content-header">
      <h1>
        统计分析
        <small>年龄组成</small>
      </h1>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>统计分析</el-breadcrumb-item>
        <el-breadcrumb-item>年龄组成</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="app-container">
      <div class="box">
        <div id="chart1" style="height: 600px"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  mounted: function () {
    this.$http.get('api/report/memberAgeProportion').then(res => {
      let data = res.data.data.map(item => {
        let name = ''
        switch (item.age_range) {
          case 0:
            name = '0-18岁'
            break
          case 1:
            name = '19-30岁'
            break
          case 2:
            name = '31-45岁'
            break
          case 3:
            name = '46-60岁'
            break
          default:
            name = '60岁以上'
            break
        }
        return {
          name: name,
          value: item.value,
        }
      })
      var myChart1 = this.$echarts.init(document.getElementById('chart1'))
      myChart1.setOption({
        title: {
          text: '年龄组成占比',
          subtext: '',
          x: 'center',
        },
        tooltip: {
          //提示框组件
          trigger: 'item', //触发类型，在饼形图中为item
          formatter: '{a} <br/>{b} : {c} ({d}%)', //提示内容格式
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '年龄组成占比',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: data,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      })
    })
  },
}
</script>
